<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input v-model="name" placeholder="请输入医院" suffix-icon="el-icon-search" style="width: 200px"
                @keyup.enter.native="mohusearch"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="mohusearch">查询</el-button>
      <el-button type="success" @click="resetParam">重置</el-button>
      <el-button type="primary" style="margin-left: 5px" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData"
              :header-cell-style="{background:'#f2f5fc',color:'#555'}"
              border>
      <el-table-column prop="userId" label="ID" width="60">
      </el-table-column>
      <el-table-column prop="name" label="院名" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="100">
      </el-table-column>
      <el-table-column prop="dailyclinic" label="日诊人数" width="80">
      </el-table-column>
      <el-table-column prop="bed" label="床位数" width="80">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="140">
      </el-table-column>
      <el-table-column prop="membership" label="隶属性质" width="80">
      </el-table-column>
      <el-table-column prop="type" label="医院类别" width="80">
      </el-table-column>
      <el-table-column prop="total" label="总人数" width="80">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.userId)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
    </el-pagination>

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        @close="flag=0"
        width="30%"
        center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="院名" prop="name">
          <el-col :span="20">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-col :span="20">
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="日诊人数" prop="dailyclinic">
          <el-col :span="20">
            <el-input v-model="form.dailyclinic"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="床位数" prop="bed">
          <el-col :span="20">
            <el-input v-model="form.bed"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="20">
            <el-input v-model="form.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-col :span="20">
            <el-input v-model="form.address"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="隶属性质" prop="membership">
          <el-col :span="20">
            <el-select v-model="form.membership">
              <el-option v-if="form.membership != '省级'" label="省级" value="省级"></el-option>
              <el-option v-if="form.membership != '市级'" label="市级" value="市级"></el-option>
              <el-option v-if="form.membership != '县级'" label="县级" value="县级"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="医院类别" prop="type">
          <el-col :span="20">
            <el-select v-model="form.type">
              <el-option v-if="form.type != '三甲'" label="三甲" value="三甲"></el-option>
              <el-option v-if="form.type != '三乙'" label="三乙" value="三乙"></el-option>
              <el-option v-if="form.type != '二甲'" label="二甲" value="二甲"></el-option>
              <el-option v-if="form.type != '二乙'" label="二乙" value="二乙"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="总人数" prop="total">
          <el-col :span="20">
            <el-input v-model="form.total"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {insetHos, selectAll, updateById, deleHos, mohuselectAll} from "@/api/hospital";

export default {
  name: "List",
  data() {
    return {
      flag: 0,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      name: '',
      sex: '',
      sexs: [
        {
          value: '1',
          label: '男'
        }, {
          value: '0',
          label: '女'
        }
      ],
      centerDialogVisible: false,
      form: {
        userId: "",
        name: "",
        phone: "",
        dailyclinic: "", //日均出诊人数
        bed: "",  //床位
        email: "",
        address: "",
        membership: "",
        type: "",
        total: ""
      }
    }
  },
  methods: {
    restForm() {
      this.$refs.form.resetFields();
    },
    mohusearch() {
      if (this.name != null&&this.name!=='') {
        console.log(this.name)
        mohuselectAll({
          name: this.name
        }).then((res) => {
          if (res.flag == true) {
            this.tableData = res.data
            this.total = res.data.length
          } else {
            alert("获取数据失败")
          }
        })
      }else {
        this.loadPost()
      }
    },
    mod(row) {
      console.log(row)

      this.centerDialogVisible = true
      this.$nextTick(() => {
        //要赋值到表单
        this.form.userId = row.userId
        this.form.name = row.name
        this.form.phone = row.phone
        this.form.dailyclinic = row.dailyclinic
        this.form.bed = row.bed
        this.form.email = row.email
        this.form.address = row.address
        this.form.membership = row.membership
        this.form.type = row.type
        this.form.total = row.total
      })
    },
    del(id) {
      console.log(id)
      deleHos({
        id: id
      }).then((res) => {
        if (res.flag == true) {
          this.loadPost()
        } else {
          this.$message.error(res.data);
        }
      })
          .catch((err) => {
            console.log("删除失败");
          });
    },
    add() {
      this.flag = 1
      this.centerDialogVisible = true
      this.$nextTick(() => {
        this.restForm()
      })
    },
    doSave() {
      if (this.form.name === "" || this.form.name == null) {
        alert("医院名不能为空");
        return;
      }
      if (this.form.address == "" || this.form.address == null) {
        alert("医院地址不能为空");
        return;
      }
      if (this.form.membership == "" || this.form.membership == null) {
        alert("医院隶属性质不能为空");
        return;
      }
      if (this.form.type == "" || this.form.type == null) {
        alert("医院类别不能为空");
        return;
      }
      insetHos({
        userId: this.tableData[this.total - 1].userId + 1,
        name: this.form.name,
        phone: this.form.phone,
        dailyclinic: this.form.dailyclinic, //日均出诊人数
        bed: this.form.bed,  //床位
        email: this.form.email,
        address: this.form.address,
        membership: this.form.membership,
        type: this.form.type,
        total: this.form.total,
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success(res.message);
          this.centerDialogVisible = false
          this.loadPost()
          this.flag = 0
        } else {
          this.$message.error(res.data);
        }
      })
          .catch((err) => {
            console.log("新增失败");
          });
    },
    doMod() {
      updateById({
        userId: this.form.userId,
        name: this.form.name,
        phone: this.form.phone,
        dailyclinic: this.form.dailyclinic, //日均出诊人数
        bed: this.form.bed,  //床位
        email: this.form.email,
        address: this.form.address,
        membership: this.form.membership,
        type: this.form.type,
        total: this.form.total,
      })
          .then((res) => {
            if (res.flag == true) {
              this.$message.success(res.message);
              this.centerDialogVisible = false
              this.loadPost()
            } else {
              this.$message.error(res.data);
            }
          })
          .catch((err) => {
            console.log("修改失败");
          });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.flag == 0) {
            this.doMod()
            console.log("修改")
          } else if (this.flag == 1) {
            this.doSave()
            console.log("增加")
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1;
      this.pageSize = val;
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.loadPost()
    },
    resetParam() {
      this.name = ''
      this.sex = ''
    },
    loadPost() {
      selectAll({}).then((res) => {
        if (res.flag == true) {
          this.tableData = res.data
          this.total = res.data.length
          console.log(this.tableData[this.total - 1].userId + 1)
        } else {
          alert("获取数据失败")
        }
      })
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>

</style>